<template>
  <div id="all">
    <div id="chart_weight1">
    </div>
    <div id="chart_weight2">
    </div>


  </div>
</template>

<script>
  import *as echarts from 'echarts'

  export default {
    name: 'WeightAnalysis',
    data() {
      return {
        option: {
            title: {
              text: '各年龄段平均体重',
              textStyle: {
                fontSize: 20,
                color: ['#6d6d6d'],
                fontWeight: 'normal'
              },
            },
            color: ['#2588ff'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: [
              {
                type: 'category',
                data: [],
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '体重（公斤）',
                type: 'bar',
                barWidth: '60%',
                data: [],
              }
            ]
        },
        option2: {
          title: {
            text: '体重分布',
            textStyle: {
              fontSize: 20,
              color: ['#6d6d6d'],
              fontWeight: 'normal'
            },
            subtext: '仅统计18岁以上的成年人',
          },
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
          },
          legend: {
            top: '10%',
            left: 'center'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  position: 'inner',
                  formatter: '{d}%',
                  textStyle: {
                    color: '#fff',
                    fontWeight: 'bold',
                    fontSize: 18
                  }
                }
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                normal: {
                  show: true,
                }
              },
              data: []
            },
          ]
        },
      }
    },
    created() {
      this.getWeightDataList()
      //体重占比
      this.getWeightList2()
    },
    methods: {
      draw(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('chart_weight1'));
        myChart.setOption(this.option);
      },
      draw2(){
        let myChart2 = echarts.init(document.getElementById('chart_weight2'));
        myChart2.setOption(this.option2);
      },
      getWeightDataList(){
        this.axios.get('micro-sports-server/weight/allAvgWeight',{
          params:{

          }
        }).then(res => {
          let arr = res.data.data;
          let arr1 = new Array(arr.length);
          let arr2 = new Array(arr.length);
          arr.forEach(function(value,index){
            arr1[index]=value.ageType;
            arr2[index]=value.avgWeight;
          });
          console.log(arr1);
          console.log(arr2);

          this.option.series[0].data = arr2;
          this.option.xAxis[0].data = arr1;

        });
      },
      getWeightList2(){
        this.axios.get('micro-sports-server/weight/WeightPercentage',{
          params:{

          }
        }).then(res => {
        /*  let arr = res.data.data;
          let arr1 = new Array(arr.length);
          let arr2 = new Array(arr.length);
          arr.forEach(function(value,index){
            arr1[index]=value.ageType;
            arr2[index]=value.avgWeight;
          });
          console.log(arr1);
          console.log(arr2);*/
          console.log(res.data);
          let tableData = res.data.data;
          for(var key in tableData){
            this.option2.series[0].data.push({name:tableData[key].weightType,value:tableData[key].weightCount});
          }
/*          this.option.series[0].data = arr2;
          this.option.xAxis[0].data = arr1;*/

        });
      },
    },
    mounted() {
      this.draw();
      this.draw2();
    },
    watch: {
      option: {
        handler(newValue, oldValue) {
          this.draw();
        },
        deep: true
      },
      option2: {
        handler(newValue, oldValue) {
          this.draw2();
        },
        deep: true
      },
    }
  }
</script>

<style scoped>

  #chart_weight1{
    width: 50%;
    height: 500px;
    margin-left: 20px;
    float: left;
  }
  #table_1{
    width: 35%;
    height: 500px;
    border: 1px solid red;
    margin-left: 20px;
    float: left;
  }

  #chart_weight2{
    width: 46%;
    height: 400px;
    margin-left: 20px;
    float: left;
    margin-top: 20px;
  }
</style>
